<template>
	<picker @change="bindPickerChange" @cancel="bindPickerCancel" :value="pickerIndex" :range="pickerRange"
		mode="multiSelector" :range-key="rangeKey" @columnchange="pickerColumnChange" style="width: 100%;">
		<view class="g-input-picker-wrapper">
			<u-input v-model="labelValue" placeholder="请选择" type="select" input-align="right" />
			<view style="position: absolute; top: 0;bottom: 0;left: 0;right: 0;z-index: 9;"></view>
		</view>
	</picker>
</template>
<!-- {
					label: '选项3',
					value: '3',
					children: [{
							label: '选项3-1',
							value: '3-1',
							children: [{
								label: '选项3-1-1',
								value: '3-1-1'
							}]
						},
						{
							label: '选项3-2',
							value: '3-2',
							children: [{
									label: '选项3-2-1',
									value: '3-2-1'
								},
								{
									label: '选项3-2-2',
									value: '3-2-2'
								},
								{
									label: '选项3-2-3',
									value: '3-2-3'
								}
							]
						}
					]
				} -->
<script setup>
	import {
		ref,
		reactive,
		computed,
		watch,
		onMounted
	} from 'vue'
	const props = defineProps({
		modelValue: {
			type: [String, Number, Array],
			default: '',
		},
		range: {
			type: Array,
			default: [],
		},
		rangeKey: {
			type: String,
			default: 'label',
		},
		level: {
			type: Number,
			default: 3,
		},
	})

	const labelValue = ref();
	const pickerIndex = ref([]);
	const pickerRange = ref([])

	const setDefaultPickerIndex = () => {
		let _v = []
		for (let i = 0; i < props.level; i++) {
			_v.push(0)
		}
		pickerIndex.value = _v
	}
	const setPickerRange = () => {
		let arr = [];
		// console.log(pickerIndex.value)
		try {
			let _rang = JSON.parse(JSON.stringify(props.range));
			for (let i = 0; i < props.level; i++) {
				arr.push(_rang);
				try{
					_rang = _rang[pickerIndex.value[i]].children||[]
				}catch(e){
					_rang = []
				}
			}
		} catch (e) {
			//TODO handle the exception
		}
		pickerRange.value = arr;

	}
	onMounted(() => {
		setDefaultPickerIndex()
		setPickerRange();
		setLabelValue();
	})
	watch(
		() => props.range,
		newValue => {
			let modelValue = props.modelValue;
			if (modelValue) {
				setLabelValue();
			}
			setPickerRange();
		}
	);
	const setLabelValue = () => {
		let newValue = props.modelValue
		if (!newValue) {
			setDefaultPickerIndex();
			labelValue.value = ''
		} else {
			let _labelValue = [];
			let _pickerIndex = [];
			let _rang = JSON.parse(JSON.stringify(props.range));
			try {
				for (let i = 0; i < props.level; i++) {
					let _index = _rang.findIndex(v => v.value == newValue[i]);
					if (_index < 0) {
						_pickerIndex.push(0);
						// _labelValue.push('');
						_rang = [];
					} else {
						_pickerIndex.push(_index);
						_labelValue.push(_rang[_index][props.rangeKey]);
						_rang = _rang[_index].children;
					}
				}
			} catch (e) {

			}
			pickerIndex.value = _pickerIndex
			labelValue.value = _labelValue.join('/');
		}
	}
	watch(
		() => props.modelValue,
		newValue => {
			// console.log('props.modelValue',props.modelValue);
			setLabelValue();
		}
	);

	const emit = defineEmits(['update:modelValue']);
	const bindPickerChange = (e) => {
		// console.log(e.detail.value);
		let value = e.detail.value;
		let modelValue = [];
		value.forEach((v, k) => {
			try {
				modelValue.push(pickerRange.value[k][v].value);
			} catch (e) {
				modelValue.push('');
			}
		})
		emit('update:modelValue', modelValue);

	}
	const bindPickerCancel = () => {

	}
	const pickerColumnChange = (e) => {
		let column = e.detail.column;
		let value = e.detail.value;
		pickerIndex.value[column] = value;
		for (let i = 0; i < props.level; i++) {
			if (i > column) {
				pickerIndex.value[i] = 0
			}
		}
		setPickerRange();
	}
</script>

<style lang="scss" scoped>
	.g-input-picker-wrapper {
		position: relative;
		width: 100%;
	}
</style>